<template>
  <div class="costDetail">
    <group label-width="1rem" label-align="left" gutter="0">
      <cell>
        <span slot="title">科目</span>
        <span slot="child">{{formdata.subjectName}}</span>
      </cell>
      <template v-for="(item,index) in formdata.subjectList">
        <cell :key="index">
          <span slot="title">{{item.label}}</span>
          <span slot="child">{{item.value}}</span>
        </cell>
      </template>
      <cell>
        <span slot="title">报销数量</span>
        <span slot="child">{{formdata.count}}</span>
      </cell>
      <cell>
        <span slot="title">费用说明</span>
        <span slot="child">{{formdata.state}}</span>
      </cell>
      <cell title="发票信息" style="height: 80px;align-items: flex-start;">
        <div slot="inline-desc" class="imgs">
          <i v-if="firstImg > 0" @click="setImgs(-3)" class="fa fa-angle-double-left"></i>
          <i v-if="(firstImg == 0)&& (formdata.allImgs.length>3)" style="color: #8e8e8e" class="fa fa-angle-double-left"></i>
          <div class="img_box" v-show="bigImgPath.includes(item)" v-for="(item, index) in formdata.allImgs">
            <img class="previewer-img" :src="_getPath(item.src)" @click="show(index)">
          </div>
          <i v-if="firstImg < formdata.allImgs.length-3" @click="setImgs(3)"
             class="fa fa-angle-double-right"></i>
        </div>
      </cell>
      <template v-if="$route.query.type != 1">
        <x-input v-if="firstOrSecond == 1" @on-blur="restStatus()" :is-type="_typeNumber" title="初审金额"
                 v-model="formdata.firstFigure" placeholder="¥"></x-input>
        <x-input v-if="firstOrSecond == 2" @on-blur="restStatus()" :is-type="_typeNumber" title="复审金额"
                 v-model="formdata.secondFigure" placeholder="¥"></x-input>
        <flexbox>
          <flexbox-item>
            <div class="flexbox-btn">
              <div class="btn-font" :class="this.no&&'btn-active'" @click="spActive(false)">{{'不予报销'}}</div>
            </div>
          </flexbox-item>
          <flexbox-item>
            <div class="flexbox-btn">
              <div class="btn-font" :class="this.yes&&'btn-active'" @click="spActive(true)">{{'确定'}}</div>
            </div>
          </flexbox-item>
        </flexbox>
      </template>
      <template v-if="$route.query.type == 1&&$route.query.auth==1">
        <cell>
          <span slot="title">初审金额</span>
          <span slot="child">{{formdata.firstFigure}}</span>
        </cell>
        <cell>
          <span slot="title">复审金额</span>
          <span slot="child">{{formdata.secondFigure}}</span>
        </cell>
      </template>
    </group>
    <div v-transfer-dom>
      <previewer :list="formdata.allImgs" ref="previewer" :options="options"></previewer>
    </div>
  </div>
</template>

<script>
  import {
    Group, XInput, TransferDom, XTextarea, Selector, Cell, Icon, XButton, Flexbox, FlexboxItem, Previewer
  } from 'vux'

  export default {
    name: "costDetail",
    directives: {
      TransferDom
    },
    props: ['formdata', 'firstOrSecond'],
    components: {
      Group, XInput, XTextarea, Selector, Cell, Icon, XButton, Flexbox, FlexboxItem, Previewer,
    },
    data() {
      return {
        no: false,
        yes: false,
        isActive: 'isActive',
        bigImgPath: [],
        firstImg: 0,
        options: {
          getThumbBoundsFn: (index) => {
            let thumbnail = document.querySelectorAll('.costDetail .previewer-img')[index]
            let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
            let rect = thumbnail.getBoundingClientRect()
            return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
          }
        }
      }
    },
    created() {

    },
    mounted() {
      this.setImgs(0)
    },
    methods: {
      // 重新填写金额需要重新确定
      restStatus() {
        this.formdata.showBeforeFigure = true;
        if (this.firstOrSecond == 1) {
          if (!(parseFloat(this.formdata.firstFigure) >= 0)) {
            this.formdata.firstFigure = 0;
            return;
          }
        }
        if (this.firstOrSecond == 2) {
          if (!(parseFloat(this.formdata.secondFigure) >= 0)) {
            this.formdata.secondFigure = 0;
            return;
          }
        }
        this.yes = false;
      },
      setImgs(index) {
        this.firstImg = this.firstImg + index;
        if (this.formdata.allImgs && this.formdata.allImgs.length > 0)
          this.bigImgPath = this.formdata.allImgs.slice(this.firstImg, this.firstImg + 3);
      },
      //确认报销
      spActive(_Is) {
        this.yes = _Is;
        this.no = !this.yes;
        if (_Is) {//审核通过
          this.formdata.status = 1;
        } else {//不予报销
          this.formdata.status = 2;
          //不予报销设置报销金额为0
          if (this.firstOrSecond == 1) {
            this.formdata.firstFigure = 0;
          }
          if (this.firstOrSecond == 2) {
            this.formdata.secondFigure = 0;
          }
        }
        // 初审
        if (this.firstOrSecond == 1) {
          if (this.formdata.firstFigure > this.formdata.fillFigure)
            this.$vux.alert.show({
              title: '提醒',
              content: '您输入的金额与报销人填写的不一致,请重新输入！',
              onHide: () => {
                // 金额置空，列表不显示，样式恢复原来
                this.formdata.firstFigure = '';
                this.yes = false;
              }
            });
          else
            this.$emit('nextTable');
        }
        // 复审
        if (this.firstOrSecond == 2) {
          if (this.formdata.secondFigure > this.formdata.firstFigure)
            this.$vux.alert.show({
              title: '提醒',
              content: '您输入的金额与初审人填写的不一致,请重新输入！',
              onHide: () => {
                this.formdata.secondFigure = '';
                this.yes = false;
              }
            })
          else
            this.$emit('nextTable');
        }
      },
      //图片预览
      show(index) {
        this.$refs.previewer.show(index)
      },
    }
  }
</script>

<style lang="less">
  .costDetail {
    .vux-cell-primary{
      flex: 0 0 auto;
    }
    .imgs {
      height: 80px;
      text-align: left;
      position: absolute;
      line-height: 80px;
      left: 1.1rem;
      right: 0;
      top: 0;
      bottom: 0;
      img {
        max-height: 55px;
        max-width: 55px;
      }
      .fa {
        font-size: 23px;
        color: #43A2FE;
      }
    }
    .img_box{
      display: inline-block;
      width: 60px;
      height: 60px;
      text-align: center;
      line-height: 60px;
    }
    .vux-x-input, .vux-x-textarea {
      .weui-cell__bd {
        padding: 2px;
        border: 0.01rem solid #E5E5E5;
        border-radius: 5px;
      }
    }
    .flexbox-btn {
      height: 60px;
      text-align: center;
      padding: 10px;
      .btn-font {
        width: 100px;
        margin: auto auto;
        color: #43A2FE;
        border: 1px solid #43A2FE;
        border-radius: 4px;
        line-height: 24px;
        font-size: 15px;
      }
      .btn-active {
        background: #43A2FE;
        color: #fff;
      }
    }
  }
</style>
